import React, { useMemo } from 'react'
import { Radio, Checkbox, Space, Typography } from 'antd'
import { getFileTypeIconSvg } from '@inbiz/utils';
import { getMessage, TextWidget } from '@inbiz/react';
const folderIcon = getFileTypeIconSvg('.folder');

export default function CategoryRender(props) {
  const { IsWhether, item, parentItem, needSlice, level, selected,
    onSelected, $selectradioValue, resetItem, isCustom, setCutomValue, fiterCustom } = props

  const geticon = (categoryKey: string, value: string) => {
    return categoryKey === 'parentfolderid' || categoryKey === 'fileextname' ? (
      <img
        style={{ width: 12, height: 12 }}
        src={categoryKey === 'parentfolderid' ? folderIcon : getFileTypeIconSvg(value)}
        className="categoryItem-Icon"
      />
    ) : undefined;
  };
  const itemList = useMemo(() => {
    // if (needSlice) {
    //   return item.sectionItemList.slice(0, 5)
    // }
    return item.sectionItemList
  }, [item])
  const radioValue = useMemo(() => {
    if (isCustom && isCustom.length > 0 && fiterCustom(parentItem.Value)) {
      return parentItem.Value
    }
    const radioValue = item.sectionItemList.find(ele => selected.includes(ele.Key))
    if (radioValue) {
      return radioValue.Key
    }
  }, [selected, isCustom])

  return (
    <div className={needSlice ? 'showCategory' : ''}>
      {
        IsWhether ?
          itemList.map(ele => {
            return <div key={ele.Key}>
              <Checkbox checked={selected.includes(ele.Key)} value={ele.Key} onChange={(e) => {
                if (resetItem) {
                  resetItem()
                }
                onSelected([ele.Key], e.target.checked, level, parentItem.IsWhether)
              }}>
                <Typography.Text title={`${ele.Value} (${ele.Count})`} ellipsis>
                  {geticon(parentItem.Key, ele.Value)}{ele.Value} ({ele.Count})
                </Typography.Text>
              </Checkbox>
            </div>
          })
          :
          <Radio.Group onChange={(e) => {
            if (e.target.value == parentItem.Value) {
              setCutomValue(parentItem, level)
            } else {
              setCutomValue(parentItem, level, '1')
              if ($selectradioValue) {
                $selectradioValue(item)
              }
              if (resetItem) {
                resetItem()
              }
              onSelected([e.target.value], true, level, parentItem.IsWhether)
            }
          }} value={radioValue}>
            <Space direction="vertical" size={0}>
              {
                itemList.map(ele => {
                  return <Radio value={ele.Key} key={ele.Key}>
                    <Typography.Text title={`${ele.Value} (${ele.Count})`} ellipsis>
                      {geticon(parentItem.Key, ele.Value)}{ele.Value} ({ele.Count})
                    </Typography.Text>
                  </Radio>
                })
              }
              {parentItem.IsCustomSearch && parentItem.ShowHierarchy != 3 &&
                <Radio value={parentItem.Value} >
                  <Typography.Text title={getMessage('SearchResultEngine.custom')} ellipsis>
                    <TextWidget>SearchResultEngine.custom</TextWidget>
                  </Typography.Text>
                </Radio>
              }
            </Space>
          </Radio.Group>
      }
    </div>
  )
}
